<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<div id="Page-content">
	<!-- ============== CONTENT CHILD ================== -->
	<div class="page-num" style="line-height:30px;">
		
		<s:iterator status="numpage" value="#request.numpages">
			<s:if test="%{#request.keySearch != null && #request.keySearch != ''}">
				<a onclick="check_box()" href="<s:url action="category.action" namespace="/"> 
					<s:param name="idCategory" value="#request.idCategory"/>
					<s:param name="keySearch" value="#request.keySearch"/>
					<s:param name="narrow" value="#request.narrow"/>
					<s:param name="numproductperpage" value="#request.numproductperpage"/>
					<s:param name="sortby" value="#request.sortby"/> 
					<s:param name="currentpage" value="#numpage.index+1" /> 
					</s:url>"><s:property value="#numpage.index+1" /> |
				</a>
			</s:if>
			<s:else>
				<a onclick="check_box()" href="<s:url action="category.action" namespace="/"> 
					<s:param name="idCategory" value="#request.idCategory"/>
					<s:param name="narrow" value="#request.narrow"/>
					<s:param name="numproductperpage" value="#request.numproductperpage"/>
					<s:param name="sortby" value="#request.sortby"/> 
					<s:param name="currentpage" value="#numpage.index+1" /> 
					</s:url>"><s:property value="#numpage.index+1" /> |
				</a>
			</s:else>
		</s:iterator>
		
		<form name="frmSoLuongSanPhamTrenTrang" action="" method="get" style="float: right">
			<label for="numproductperpage">View:</label>
			
			<s:hidden name="idCategory" value="%{#request.idCategory}" />
			
			<s:if test="%{#request.keySearch != null && #request.keySearch != ''}">
				<s:hidden name="keySearch" value="%{#request.keySearch}"/>
			</s:if>
				
			<s:select name="numproductperpage" list="#{'5':'5', '10':'10', '15':'15', '-1':'All'}" value="#request.numproductperpage"  onchange="submit()"/>
			
			<s:hidden name="narrow" value="%{#request.narrow}" />
			<s:hidden name="sortby" value="%{#request.sortby}" />
			
		</form>
	</div>
	<div class="page-compare" style="padding-top: 5px">
		<div style="font-size: 12px; float: left">Compare up to items</div>
		<form  id="compare_frm">
		
          <img onClick="removeProduct(this)" name="compare" src="" alt="" width="30px" height="30" style="background:#fff; border:solid 1px; float:left; margin-left:10px;"/> 
          <img onClick="removeProduct(this)" name="compare" src="" alt="" width="30px" height="30" style="background:#fff; border:solid 1px; float:left; margin-left:10px"/> 
          <img onClick="removeProduct(this)" name="compare" src="" alt="" width="30px" height="30" style="background:#fff; border:solid 1px; float:left; margin-left:10px"/> 
          <img onClick="removeProduct(this)" name="compare" src="" alt="" width="30px" height="30" style="background:#fff; border:solid 1px; float:left; margin-left:10px"/>
          <span class="button" onclick="sendCompare()" style="margin-left:20px; float:left; margin-top:8px"><a href="#">Compare</a></span>
          
        </form>
		<form name="frmSort" action="" method="get" style="float: right">
		
			<label for="sort">Sort by:</label>
			
			<s:hidden name="idCategory" value="%{#request.idCategory}" />
			
			<s:if test="%{#request.keySearch != null && #request.keySearch != ''}">
				<s:hidden name="keySearch" value="%{#request.keySearch}"/>
			</s:if>
				
			<s:hidden name="numproductperpage" value="%{#request.numproductperpage}" />
			<s:hidden name="narrow" value="%{#request.narrow}" />
			
			<s:select name="sortby" list="#{'1':'Rate hight to low', '2':'Price hight to low', '3':'Price low to hight', '4':'Best Selling'}" value="#request.sortby"  onchange="submit()"/>
		</form>
	</div>

	<s:if test="%{#request.listproduct != null && #request.listproduct.size != 0}">
		<!-- ================= DETAILS =============-->
		<s:iterator status="product" value="#request.listproduct" >
			<div class="details">
				<a href="<s:url action="detailproduct.action"><s:param name="sku"><s:property value="sku" /> </s:param> </s:url> ">
					<s:if test="%{productImages != null}">
						<img src="<s:property value="productImages.get(0).imageUrl" />" width="150px" height="150px" class="pic" width="100" height="150" />
					</s:if>
					<s:else>
						<img src="" width="150px" height="150px" class="pic" width="100" height="150" />
					</s:else>
					
				</a>
				<div style="position: relative; left: -100px; top: 160px">
					<input type="checkbox" name="check_com" id="<s:property value="sku" />" onChange="sendMessage( '<s:property value="sku" />', '<s:property value="productImages.get(0).imageUrl" />')  " />
					Compare
				</div>
				<div class="infor">
					<div class="name" style="padding-bottom: 20px;">
						<a href="<s:url action="detailproduct.action"><s:param name="sku" value="sku" /></s:url> "><s:property value="name"/></a>
					</div>
					<span style="font-size: 12px; font-weight: bold">MODEL:
					</span><span style="font-size: 12px"><s:property value="model" /></span> <span
						style="font-size: 12px; font-weight: bold"> SKU: </span><span
						style="font-size: 12px"><s:property value="sku" /></span>
					<ul>
					<s:iterator value="features" >
						<li><s:property /></li>
					</s:iterator>
					</ul>
					<span style="font-size: 12px; font-weight: bold">Customer Reviews: </span><img src="images/rate_<s:property value="rate"/>.jpg" /> <span
						style="font-size: 12px; font-weight: bold"><s:property value="rate" /> of 5</span><br/>
					<span style="font-size:12px; font-weight:bold">Price: </span><span style="font-size:12px; font-weight:bold;"><s:property value="price" /> $</span><p/>
				</div>
				<span class="button" style="margin-top: 50px; margin-left: 170px">
					<s:if test="%{#request.keySearch != null && #request.keySearch != ''}">
						<a href="<s:url action="category.action">
							<s:param name="idCategory" value='#request.idCategory' />
							<s:param name="keySearch" value="#request.keySearch"/>
							<s:param name="sku" value="sku" />
							<s:param name="action">AddToCart</s:param>
							</s:url> ">Add to Cart
						</a>
					</s:if>
					<s:else>
						<a href="<s:url action="category.action">
							<s:param name="idCategory" value='#request.idCategory' />
							<s:param name="sku" value="sku" />
							<s:param name="action">AddToCart</s:param>
							</s:url> ">Add to Cart
						</a>
					</s:else>
				</span> 
				<span class="button" style="margin-left:10px;">
				<a href="<s:url action="user/info">
					<s:param name="action" >AddToWishList</s:param>
					<s:param name="sku" value="sku" />
					</s:url> ">Add to Wish list</a></span>
			</div>
		</s:iterator>
	</s:if>
	<s:else>
		<div style="font-size:15px; margin: 20px 0px 0px 300px;" >No product !!!</div>
	</s:else>
</div>